<template>
  <div class="nnn">
    <header class="gouwu">
      <span @click="goshangceng()"
        ><svg-icon iconClass="back" class="zhuo_back"></svg-icon
      ></span>
      <div>购物车</div>
    </header>

    <main>
      <div v-for="(item, index) in data" :key="index" class="zzz">
        <input
          type="checkbox"
          :checked="item.flag"
          @change="setFlag(item)"
          @click="aaaaa(item)"
          class="inn"
        />
        <img :src="item.img" alt="" />
        <div class="rrr">
          <span>
            {{ item.www }}
          </span>
          <span>ipone Watch</span>
          <span>七天无理由</span>
        </div>
        <div>
          <div>价格:{{ (item.allprice = item.price * item.shopnum) }}</div>
          <div>数量:{{ item.shopnum }}</div>
        </div>
      </div>
    </main>
    <footer class="mmm">
      <div>
        <input type="checkbox" :checked="allIf" @change="allFlag()" />
        全选
      </div>
      <span>合计:￥{{ allpri }}</span>
      <div @click="gozhifu()">去结算</div>
    </footer>
  </div>
</template>

<script>
import { mapState } from "vuex";
export default {
  name: "shopcar",
  data() {
    return {
      data: [],
      allIf: false,
      allpri: 0,
      checksj: [],
    };
  },
  computed: {
    ...mapState(["list"]),
  },
  created() {
    this.data = this.list;
    console.log(this.data.length);
  },
  methods: {
    setFlag(item) {
      item.flag = !item.flag;
      const result = this.list.every((item) => {
        return item.flag === true;
      });
      this.allIf = result;
    },
    allFlag() {
      if (this.allIf) {
        this.list.forEach((element) => {
          element.flag = false;
        });
      } else {
        this.list.forEach((element) => {
          element.flag = true;
        });
      }
      this.allIf = !this.allIf;
    },
    aaaaa(item) {
      const result = this.checksj.indexOf(item.id);
      if (item.flag || result) {
        this.checksj.push(item.id);
        this.allpri += item.allprice;
      } else if (result !== -1) {
        this.allpri -= item.allprice;
        this.checksj.splice(result, 1);
      }
    },
    gozhifu() {
      this.$router.push({ name: "Zhifu", query: { allpri: this.allpri } });
    },
    goshangceng() {
      this.$router.go(-1);
    },
  },
};
</script>

<style lang="scss">
.nnn {
  width: 100%;
  height: 100%;
  background-color: #f2f2f2;
  display: flex;
  flex-direction: column;
  font-size: 18px;
}
main {
  flex: 1;
}
.gouwu {
  width: 100%;
  height: 50px;
  display: flex;
  padding: 0 10px;
  line-height: 50px;
  line-height: 50px;
  background-color: #fff;
  border-bottom: 1px solid #f3f3f3;

  div {
    margin: 0 auto;
    padding-right: 16px;
  }
}
.zzz {
  width: 100%;
  height: 120px;
  // border: 1px solid #ccc;
  background: #fff;
  margin: 5px 0;
  display: flex;
  padding: 10px;
  justify-content: space-between;
}
.rrr {
  display: flex;
  flex-direction: column;
  justify-content: space-around;
}
.inn {
  margin-top: 40px;
}
.mmm {
  width: 100%;
  height: 50px;
  line-height: 50px;
  display: flex;
  justify-content: space-around;
  background: #fff;
  margin-bottom: 2px;
  position: sticky;
  left: 0;
  bottom: 0;
  font-size: 16px;
}
// .eee {
//   text-overflow: -o-ellipsis-lastline;
//   overflow: hidden;
//   text-overflow: ellipsis;
//   display: -webkit-box;
//   -webkit-line-clamp: 2;
//   -webkit-box-orient: vertical;
// }
</style>
